<template>
  <div class="todo-filters">
    <span
      v-for="(item, index) in filterOptions"
      :key="index"
      :class="currentIndex === index && 'active'"
      @click="changeIndex(index)"
    >
      {{ item }}
    </span>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
let emit = defineEmits(['changeFilter'])

const filterOptions = reactive(['全部', '已完成', '未完成'])
let currentIndex = ref(0)
const changeIndex = (v: number) => {
  currentIndex.value = v
  emit('changeFilter', v)
}
</script>

<style scoped lang="less">
.todo-filters {
  margin: 20px 0;
  span {
    margin: 0 10px;
    cursor: pointer;
    &.active {
      color: red;
    }
  }
}
</style>
